<template>
  <div>
    <el-row>
      <el-col :span="20"/>
      <el-col :span="2">
        <el-button @click="RedirectToMainPage">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"/>
      <el-col :span="10">
        <input v-model="dictionaryName" placeholder="请输入字典名称"/>
          <el-upload
            class="upload-demo"
            :data="{ dictionaryName }"
            :show-file-list="false"
            drag
            action="http://localhost:8080/api/upload-file"
            multiple
          >
            <div class="el-upload__text">
              拖拽或者<em>点击此处</em>上传文件
            </div>
        </el-upload>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"/>
      <el-col :span="10">
        <el-button type="primary" @click="AddUser">添加用户</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"/>
      <el-col :span="10">
        <el-text class="notice" v-model="responseValue"></el-text>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// --------------------引入包--------------------
import {ref}from 'vue'
import { useRouter } from 'vue-router'
import type { UserConfigDetailed } from './TempAdminConfigInterface';
import api from '@/utils/axiosUtil';

// --------------------全局变量--------------------
const router = useRouter();
const dictionaryName = ref('') // 字典名称

function RedirectToMainPage(){
  router.push('main');
}

const responseValue = ref('');

async function AddUser(){
  const userConfigDetailed:UserConfigDetailed = {
    userId: "1",
    userName: 'first',
    userPassword: '123456',
    userEmail: 'abandon@abandon.abandon',

    newWordNumber: 30,
    recallWordNumber: 30,
  }
  try {
    const response = await api.post<Map<string,string>>('/add-user', userConfigDetailed);
    for(const key in response.data) {
        responseValue.value = "key:"+key+"value:"+response.data.get(key);
    }
  } catch (error) {
    console.error('登录失败:', error);
    throw error;
  }
}
</script>
